<html>
<head>
  <title>Animated Correlated Positional Errors using Google Maps API v3</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript" language="javascript" src="js/CircleOverlay-v3.js"></script>
  <script type="text/javascript" language="javascript" src="js/OpenError.js"></script>
  <script type="text/javascript" language="javascript" src="js/data_params.js"></script>
  <script type="text/javascript" language="javascript" src="js/DispObjects.js"></script>
  <script type="text/javascript" language="javascript">
  //<![CDATA[
/////////////////////
// GLOBALS
/////////////////////
var map;
var oe;
var disp;
	
function DrawObjects()
{
	var data = oe.generateDataset(); // generate a new data set with offset errors
	var original = oe.getDataSet(); // this seems redundant, but lets us change which data set we're using in the main load function alone

	// draw initial set of points
	disp.addPoints();
	
	for(var i =0;i<data.length;i++)
	{
		// create data for circle object
		// TODO: move this as createCircles() function to disp object
		var circle = new CircleOverlay(new google.maps.LatLng(original.coordinates[i][0],original.coordinates[i][1]), (oe.getStandardDeviation() / 1609.344), "#336699", 1, 1, '#336699', 0.25);
			
		var c = new CObject();
		c.overlay = circle;
		c.sd = 1;
		disp.c_objects.push(c);
		
	}
	
	// show points and circles by default
	disp.showPoints();
	disp.showCircles();
	loop();
}
	
	
	function loop()
	{
		var time = 1000; //default: 1 second
		var select = document.getElementById('time');
		if( select !== null)
		{
			time = select.value;
		}
		
		disp.recalculatePoints();
		
		setTimeout(loop, time);
	}
	

    
    function load() {
            // Create Map
			var myOptions = {
			  zoom: 5,
			  mapTypeId: google.maps.MapTypeId.ROADMAP,
			  center: new google.maps.LatLng(defaults.center[0], defaults.center[1])
			}
			map = new google.maps.Map(document.getElementById("map"), myOptions);
			

			
			// create a new openerror object for introducing controlled error
			oe = new OpenError();

			oe.setDataSet(defaults.pts);  // var created on dataset.js file
			oe.setStandardDeviation(150000); //1609.344 ~ mile);
			oe.setDebug(true);
			oe.setCorrelated( false );
			oe.setK( 0.01 );
			//oe.set
			
			disp = new DispObject("map", "g3");
			DrawObjects();
			
    }
    //]]>
    </script>
<style>
table,tr,td,th
{
	border: solid 1px gray;
}
</style>
</head>
<FONT FACE="Arial, Helvetica, Geneva">

<body onLoad="load()" >
<h2>Animated points using Google Maps API v3</h2>
<p>This page demonstrates how correlated errors for a set of locations can be generated 
and animated in a web page using using OpenError and Google Maps API v3. Initial locations 
are in the centers of the circles on the map, while the markers are positioned at the realization 
locations. Circles are 150000 m. in radius, which is the standard deviation for the displacement. 
k (power) is 0.01. Summary statistics for realizations for each point are presented in the table. 
You may wish to avoid letting this run all night!</p>
<div style="margin:auto;text-align:center;">
		<div id="mapWrapper" style="float: left;">
			<div id="map" style="width: 450px; height: 400px; border: 1px solid #666666;"></div>
		</div>
		<div style="margin-left: 455px;text-align:left">
			<strong>Points: </strong>
			<input type="button" onclick="disp.showPoints();" value="Show">
			<input type="button" onclick="disp.hidePoints();" value="Hide"><br/><br/>
			<strong>Circles: </strong>
			<input type="button" onclick="disp.showCircles();" value="Show">
			<input type="button" onclick="disp.hideCircles();" value="Hide"><br/><br/>
			<strong>Update Time: </strong>
			<select id="time">
				<option value="1000">1 Second</option>
				<option value="2000">2 Seconds</option>
				<option value="5000">5 Seconds</option>
			</select>
			<div id="results"></div>
		</div>
		<div style="clear:both;"></div>
	</div>
	<div id="debug"></div>
	<p><a href='./index.html'><i>OpenError</i></a></p>
</body>
</html>